<template lang="html">
    <div class="goods">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;藏品列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :inline="true"  class="demo-form-inline">
        		<el-form-item label="分类：">
					<el-select v-model="classValue" @change="changeValue" placeholder="请选择">
                        <el-option
                        v-for="item in className"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSelect()">查询</el-button>
				</el-form-item> 
				<el-form-item> 
					<el-button type="warning" @click="StartReset()">全部</el-button>
				</el-form-item>
			</el-form>
            <el-tabs v-model="message"  @tab-click="handleClick">
                <el-tab-pane label="已上架" name="2"></el-tab-pane>
                <el-tab-pane label="已下架" name="4"></el-tab-pane>	
                <div style="height:20px;"></div>
                <el-table :data="list" style="width: 100%" v-loading="loading">
                    <el-table-column prop="id" label="ID" width="100"></el-table-column>
                    <el-table-column label="封面图" width="120" align="center">
                        <template slot-scope="scope" >
                            <div><img :src="scope.row.head_img" style="width:100px;height:100px"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title_cn" label="标题"  align="center"></el-table-column>
                    <el-table-column prop="price" label="价格"  align="center"></el-table-column>
                    <el-table-column prop="stock" label="库存"  align="center" width="100"></el-table-column>
                    <el-table-column prop="category_name1" label="分类"  align="center"></el-table-column>
                    <el-table-column label="每周精选"  align="center" width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.is_fine == 1">是</div>
                            <div v-if="scope.row.is_fine == 0">否</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="精品推荐" width="100" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.is_recommend == 1">是</div>
                            <div v-if="scope.row.is_recommend == 0">否</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope" >
                            <el-button v-show="scope.row.is_recommend == 0 && types != 0 && state != 4" size="small" type="text"  @click="changeSetRe(scope.row)" >设置推荐</el-button>
                            <el-button v-show="scope.row.is_fine == 0 && types != 0 && state != 4" size="small" type="text"  @click="changeSetFine(scope.row)" >设置精选</el-button>
                            <el-button class="check" size="small" type="text"  @click="ToDetail(scope.row)" >查看</el-button>
                            <el-button v-show='state == 2' class="cancel" size="small" type="text"  @click="changeUnShelve(scope.row)" >下架</el-button>
                            <el-button v-show='state == 4' class="cancel" size="small" type="text"  @click="changeUnShelve(scope.row)" >重新上架</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
            <div class="pagination" v-show="total>1">
                <el-pagination
                v-if="paginationShow"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {getGoodList,getGoodDetail,getClass1,postSetFine,postSetRe,postUnShelve} from '@/api/goods/list'
    export default {
        name: "goods",
        data() {
            return {
                loading:true,//加载中
                type:0,//类型：0不限、1精品推荐、2每周精选
                types:0,//
                className:[],//一级分类
                classValue:"",//默认空
                class1:0,//一级分类ID、传0为全部
                pageIndex:1,
                pageSize:10,
                total:0,//总条数
                state:2,//只获取审核通过的,状态：0所有、1待审核、2审核通过、3审核不通过,4已下架
                list:[],//藏品列表
                message:'2',
                states:4,//状态：2上架、4下架
                paginationShow:true,//分页器重新渲染
            }
        },
        created(){
            //获取id
            if(this.$route.query.type || this.$route.query.type != ''){
                this.types = this.$route.query.type;
            }else {
                this.types = 0;
            }
            //获取藏品列表
            this.getGoodList();
            this.getClass1();
        },
        mounted() {
            
        },
        methods: {
            //获取藏品列表
            getGoodList(){
                getGoodList(this.state,this.type,this.class1,this.pageIndex,this.pageSize).then(res => {
                    // console.log(res);
                    this.list = [];
                    this.loading = false;//关闭加载中
                    this.list = res.data.list;
                    this.total = res.data.total;
                })
            },
            //获取一级分类
            getClass1(){
                getClass1(0).then(res => {
                    this.className = res.data;
                })
            },
            //tab，切换藏品列表
            handleClick(){
                this.loading = true;//打开加载中
                this.pageIndex = 1;//显示第一页
                this.paginationShow = false   //分页器消失
                this.$nextTick(function () {
                    //分页器重新加载 解决element 分页器的无法触发current-change事件 只限在tabs页 
                    this.paginationShow = true  
                })
                if(this.message == 2){
                    this.state = 2;//显示已上架列表
                    this.states = 4;//下架
                }else {
                    this.state = 4;//显示已下架列表
                    this.states = 2;//上架
                }
                this.getGoodList();
            },
            //设置每周精选
            changeSetFine(ev){
                postSetFine(ev.id).then(res => {
                    if(res.code == 200){
                        this.$message({
                            message: '设置成功！',
                            type: 'success'
                        });
                        this.getGoodList();//重新加载列表
                    }else {
                        this.$message.error('设置失败！');
                    }
                })
            },
            //设置精品推荐
            changeSetRe(ev){
                postSetRe(ev.id).then(res => {
                    // console.log(res);
                    if(res.code == 200){
                        this.$message({
                            message: '设置成功！',
                            type: 'success'
                        });
                        this.getGoodList();//重新加载列表
                    }else {
                        this.$message.error('设置失败！');
                    }
                })
            },
            //查询
            onSelect(){
                this.getGoodList();
            },
            changeValue(ev){
                // console.log(ev);
                this.loading = true;
                this.class1 = ev;
                this.getGoodList();
            },
            StartReset(){
                this.class1 = 0;
                this.getGoodList();
            },
            //下架
            changeUnShelve(ev){
                var goodsId = ev.id;
                postUnShelve(goodsId,this.states).then(res => {

                    if(res.code == 200){
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.getGoodList();//重新加载列表
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //跳转详情
            ToDetail(ev){
                this.$router.push({path:'/goods/details',query:{id:ev.id}});
            },
            handleCurrentChange(index){
                this.loading = true;//加载中
                this.pageIndex = index;
                this.getGoodList();//重新加载
            },
        }
    }
</script>

<style lang="css" scoped>
.check {
    color: orange;
}
.cancel {
    color:red;
}
</style>
